<template>
  <div class="comment">
    <div class="submitbox">
      <h3>提交评论</h3>
      <div>
          <x-textarea :max="200" placeholder="评论内容" @on-focus="onEvent('focus')" @on-blur="onEvent('blur')" v-model="comment"></x-textarea>
          <x-button :gradients="['#1D62F0', '#19D5FD']" mini @click.native="clickPost">发表</x-button>
      </div>
    </div>
    <div class="commentbox">
      <h3 class="line">评论详情</h3>
      <ul>
        <li v-for="(item,index) in commentList" :key="index">
          <h4 class="comment-content">{{item.content}}</h4>
          <p>
            <span class="comment-user">{{item.user_name}}</span>
            <span class="comment-time">{{item.add_time | filterTime}}</span>
          </p>
        </li>
      </ul>
    </div>
    <div class="button">
      <x-button :gradients="['#1D62F0', '#19D5FD']" v-if="hasMore" @click.native="downLoadMore" >查看更多</x-button>
      <x-button type="warn" disabled v-else>没有更多</x-button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { XButton, XTextarea,AlertPlugin } from 'vux'
Vue.use(AlertPlugin)
import qs from 'qs'
import { getComment, publicComment } from '@/api'
export default {
  components: {
    XButton,
    XTextarea
  },
  data () {
    return {
      commentList: [], // 用来存储评论列表的内容
      comment: '', // 用来存储用户输入的内容
      hasMore: true,
      pageIndex: 1 // 默认显示第一页
    }
  },
  props: ['id'],
  created () {
    this.initCommentList()
    // console.log(this.id)
  },
  methods: {
    onEvent (event) {
      // console.log('on', event)
    },
    // 获取评论内容
    initCommentList () {
      getComment(parseInt(this.id), this.pageIndex)
        .then(res => {
          // console.log(res)
          let newData = res.message // 请求回来的新数据
          let oldData = this.commentList // 之前存有的旧数据
          // 判断是否还有下一页
          if (newData.length < 10) {
            this.hasMore = false
          }
          // 拼接数据
          this.commentList = [...oldData, ...newData]
        })
    },
    // 加载更多
    downLoadMore () {
      this.pageIndex += 1
      this.initCommentList()
    },
    // 点击发表评论
    clickPost () {
      let postData = { content: this.comment }
      // // 后台需要传入的参数不是json格式的，而是表格形式的，所以需要转换
      postData = qs.stringify(postData)
      // 点击发表前进行校验
      if (!this.comment.trim()) {
        this.$vux.alert.show({
          title: '温馨提示',
          content: '请输入内容！',
          onShow () {
            // console.log('Plugin: I\'m showing')
          },
          onHide () {
            // console.log('Plugin: I\'m hiding')
          }
        })
        console.log('内容不能为空')

        return false
      }
      publicComment(this.id, postData)
        .then(res => {
          if (res.status === 0) {
            this.$vux.alert.show({
              title: '恭喜你',
              content: '发表成功！',
              onShow () {
                // console.log('Plugin: I\'m showing')
              },
              onHide () {
                // console.log('Plugin: I\'m hiding')
              }
            })
            console.log('发表成功')

            // 清空输入框的内容
            this.comment = ''
            // 调用初始化数据方法时先清空之前的旧数据,并将页码重置为第一页
            this.pageIndex = 1
            this.commentList = []
            this.initCommentList()
          }
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.inputbox {
  border: 1px solid #999;
}
.comment h3 {
  font-weight: bold;
  margin: 10px 0;
  font-size: 14px;
}
.line {
  border-top: 1px solid #999;
  padding-top: 10px;
}
.commentbox{
  li:not(:last-child) {
    border-bottom: 1px solid #999;
    margin: 5px 0;
  }
  p {
    font-size: 14px;
  }
  .comment-content {
    color: #999;
    font-size: 14px;
  }
}
.comment-user, .comment-time {
  font-size: 12px;
  color: #26a2ff;
}
</style>
